<!--  -->
<template>
  <div class="pending">
    <div class="tab_show">
      <el-tabs v-model="formInline.state" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabPane" :key="item.label" :label="item.label" :name="item.name"/>
      </el-tabs>
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <div>
              <el-input v-model="formInline.search" placeholder="请输入内容">
                <el-select
                  slot="prepend"
                  v-model="formInline.searchType"
                  style="width:130px"
                  placeholder="请选择"
                >
                  <el-option label="订单id" value="1"/>
                  <el-option label="买家账户" value="2"/>
                  <el-option label="收件人姓名" value="3"/>
                  <el-option label="收件人手机号" value="4"/>
                </el-select>
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="商户名称">
            <el-input v-model="formInline.shopName" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="formInline.dates"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search">查询</el-button>
            <el-button type="success" plain @click="orderDataExport">导出订单</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          v-loading="tableLoading"
          :data="tableData"
          border
          stripe
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            v-for="item in column"
            :key="item.lable"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            show-overflow-tooltip/>
          <el-table-column label="订单状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="'state-'+ scope.row.state ">{{ scope.row.state | stateName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="订单详情" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="btnList">
                <el-button type="text" @click="seeMore(scope.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="formInline.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="订单详情"
      :visible.sync="detailVisible"
      width="74%"
      center
      :close-on-click-modal="false"
    >
      <OrderDetail :detailRow="form" @cancel="cancel"/>
    </el-dialog>
  </div>
</template>

<script>
const tabPane = [
  {
    name: '',
    label: '全部'
  },
  {
    name: '1',
    label: '待付款'
  },
  {
    name: '2',
    label: '待发货'
  },
  {
    name: '3',
    label: '已发货'
  },
  {
    name: '4',
    label: '已完成'
  },
  {
    name: '5',
    label: '已关闭'
  }
]
const column = [
  {
    prop: 'orderId',
    label: '订单id',
    width: '150',
  },
  {
    prop: 'number',
    label: '商品数量',
    width: '100',
  },
  {
    prop: 'shopName',
    label: '商户名称',
    width: '220',
  },
  {
    prop: 'customerName',
    label: '下单账户',
  },
  {
    prop: 'receiveName',
    label: '收件人',
  },
  {
    prop: 'receivePhone',
    label: '手机号',
  },
  {
    prop: 'price',
    label: '支付金额（元）',
  },
  {
    prop: 'createTime',
    label: '下单时间',
  }
]
import OrderDetail from '@/views/order/pending/pendDetails.vue'
import {orderGetAll, orderExport} from '@/api/order'

export default {
  components: {OrderDetail},
  data() {
    // 这里存放数据
    return {
      activeName: 'first',
      formInline: {
        searchType: '1',
        search: '', // 搜索字段
        state: '',
        // afterState: '', // 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
        dates: [], // 下单时间数组
        page: 1,
        shopName: '',
        pageSize: 10
      },
      total: 1,
      column,
      tabPane,
      tableData: [],
      tableLoading: false,
      detailVisible: false,
      form: {}
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAll(this.formInline)
    this.handleClick({name: ''})
  },
  filters: {
    stateName(val) {
      let v = val - 0
      let name = ''
      if (v === 1) {
        name = '待付款'
      } else if (v === 2) {
        name = '待发货'
      } else if (v === 3) {
        name = '已发货'
      } else if (v === 4) {
        name = '已完成'
      } else if (v === 5) {
        name = '关闭'
      }
      return name
    }
  },
  // 方法集合
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    handleClick(tab, event) {
      this.page = 1
      this.formInline.state = tab.name
      this.formInline.page = 1
      this.getAll(this.formInline)
    },
    //  查询
    search() {
      this.total = 1
      this.formInline.page = 1
      this.getAll(this.formInline)
    },
    // 详情
    seeMore(row) {
      this.detailVisible = true
      this.form = row
    },
    cancel() {
      this.detailVisible = false
    },
    // 初始化查询所有数据
    async getAll(formInline) {
      this.tableLoading = true
      const res = await orderGetAll(formInline)
      this.tableData = res.data.list
      this.total = res.data.total
      this.tableLoading = false
    },
    // 导出订单
    async orderDataExport() {
      this.$message({
        message: '数据导出中，请勿重复操作！',
        type: 'success'
      })
      const res = await orderExport(this.formInline)
      if (!res) {
        return
      }
      const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
      const fileName = '订单数据明细表.xls'
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");

.tab_show {
  padding-left: 30px;
}

.state-1 {
  color: #E6A23C;
}

.state-2 {
  color: #F56C6C;
}

.state-3 {
  color: #409EFF;
}

.state-4 {
  color: #67C23A;
}

.state-5 {
  color: #909399;
}
</style>
